<template>
    <lightning-card title="ContactInfo" icon-name="custom:custom30">
        <template lwc:if={contact.data}>
            <div class="slds-align_absolute-center">
                <div class="slds-var-m-around_medium slds-text-align_center">
                    <template lwc:if={picture}>
                        <img
                            src={picture}
                            class="slds-avatar slds-avatar_circle slds-avatar_large"
                            alt="Profile photo"
                        />
                    </template>
                    <p>{name}</p>
                    <p>{title}</p>
                    <p>
                        <lightning-formatted-phone
                            value={phone}
                        ></lightning-formatted-phone>
                    </p>
                    <p>
                        <lightning-formatted-email
                            value={email}
                        ></lightning-formatted-email>
                    </p>
                </div>
            </div>
        </template>
        <template lwc:elseif={contact.error}>
            <c-error-panel errors={error}></c-error-panel>
        </template>

        <c-view-source source="lwc/contactInfo" slot="footer">
            Shows contact details. This component is the target of the dynamic
            interaction. It handles the event fired by the source component (see
            contactSelector component).
        </c-view-source>
    </lightning-card>
</template>
